import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ImageBackground,
  Dimensions,
  ScrollView,
} from 'react-native';
import { Input, Button } from 'react-native-elements';

import Icon from 'react-native-vector-icons/FontAwesome';

import { getUserPhone,setUserPhone,setAuthority } from '../utils/authority';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

const BG_IMAGE = require('../assets/images/bg_screen1.jpg');

export default class LoginScreen1 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fontLoaded: false,
      phone: '',
      phone_valid: true,
      password: '',
      login_failed: false,
      showLoading: false,
    };
  }
  componentDidMount(){
    console.log(this.props);
    getUserPhone().then((userData)=>{
      userData&& userData.phone && this.setState({phone:userData.phone});
    });
  }


  submitLoginCredentials= async() =>{
    const { phone, password, } = this.state;

    if(phone.length !=11){
      this.setState({phone_valid:false});
      return;
    }
    try{
      let param=`login_pwd=${password}&login_name=${phone}&type=2`;
      let response = await fetch('http://viquan.droyee.com/Login/Login/login?'+param);
      let responseJson = await response.json();
      console.log(responseJson);
      if(responseJson.status==1){
        let saveData={phone,password,};
        setUserPhone(saveData);
        setAuthority(responseJson.data);
        this.props.navigation.navigate('App')
      }else{
        alert(responseJson.remark);
      }
      
    }catch(err){
      console.log(err);
      alert('登录失败');
    }
  }

  render() {
    const { phone, password, phone_valid, } = this.state;

    return (
        <ScrollView scrollEnabled={false} keyboardShouldPersistTaps="handled" contentContainerStyle={styles.container}>
        
        <ImageBackground source={BG_IMAGE} style={styles.bgImage}>
            <View style={styles.loginView}>
              
              
              <View style={styles.loginInput}>
              <Input
                  leftIcon={
                    <Icon
                      name="phone"
                      color="white"
                      size={25}
                    />
                  }
                  containerStyle={{ marginVertical: 10 }}
                  onChangeText={phone => this.setState({ phone,phone_valid:true })}
                  value={phone}
                  inputStyle={{ marginLeft: 10, color: 'white' }}
                  keyboardAppearance="light"
                  placeholder="手机号"
                  autoFocus={false}
                  autoCapitalize="none"
                  autoCorrect={false}
                  keyboardType="phone-pad"
                  blurOnSubmit={false}
                  placeholderTextColor="#eee"
                  errorStyle={{ textAlign: 'center', fontSize: 12 }}
                  errorMessage={
                    phone_valid ? null : '请填写正确的手机号'
                  }
                />

                

                <Input
                  leftIcon={
                    <Icon
                      name="lock"
                      color="white"
                      size={25}
                    />
                  }
                  containerStyle={{ marginVertical: 10 }}
                  onChangeText={password => this.setState({ password })}
                  value={password}
                  inputStyle={{ marginLeft: 10, color: 'white' }}
                  secureTextEntry={true}
                  keyboardAppearance="light"
                  placeholder="密码"
                  autoCapitalize="none"
                  autoCorrect={false}
                  keyboardType="default"
                  returnKeyType="done"
                  blurOnSubmit={true}
                  placeholderTextColor="white"
                />
              </View>

              <Button
                title="登录"
                activeOpacity={1}
                underlayColor="transparent"
                onPress={this.submitLoginCredentials}
                disabled={!phone_valid && password.length < 6}
                buttonStyle={{
                  height: 50,
                  width: 250,
                  backgroundColor: 'transparent',
                  borderWidth: 2,
                  borderColor: 'white',
                  borderRadius: 30,
                }}
                containerStyle={{ marginVertical: 10 }}
                titleStyle={{ fontWeight: 'bold', color: 'white' }}
              />
              <View style={styles.footerView}>
                <Button
                  title="注册新用户"
                  type="outline"
                  titleStyle={{ color: 'white', fontSize: 15 }}
                  containerStyle={{ marginTop: -5 }}
                  onPress={() => this.props.navigation.navigate('Register') }
                />
              </View>
            </View>
        </ImageBackground>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#293046',
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  formContainer: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  bgImage: {
    flex: 1,
    top: 0,
    left: 0,
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loginView: {
    marginTop: 10,
    backgroundColor: 'transparent',
    width: 250,
    height: 400,
  },
  loginTitle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  travelText: {
    color: 'white',
    fontSize: 30,
  },
  plusText: {
    color: 'white',
    fontSize: 30,
  },
  loginInput: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footerView: {
    marginTop: 20,
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
